{include file="index/_meta" /}
<title>店铺</title>
<style>
    .van-card__thumb{
        line-height: 88px;
    }
    .van-card__thumb img{
        vertical-align: middle;
    }
    .van-card__title{
        font-weight: bold;
        font-size: 16px;
    }
    .van-card__desc{
        color: red;
    }
    .van-card__price{
        color: red;
        font-size: 14px;
    }
</style>
</head>
<body>
<div id="app">

    <van-nav-bar title="店铺" :left-text="district" @click-right="jumpSearch">
        <template #right>
            <van-icon name="search" size="18"></van-icon>
        </template>
    </van-nav-bar>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in carousel" :key="index">
            <van-image height="150" :src="item.pic" ></van-image>
        </van-swipe-item>
    </van-swipe>

    <van-swipe class="my-swipe"  :loop="no">
        <van-swipe-item v-for="len in SwipeLength" :key="len">
            <van-grid :gutter="8" style="padding: 10px;">
                <van-grid-item
                        v-for="(item ,index) in shopCateList[len-1]"
                        :key="index"
                        :icon="item.img"
                        :text="item.name"
                        @click="shopCateChange(item.id)"
                ></van-grid-item>
            </van-grid>
        </van-swipe-item>
    </van-swipe>

    <div style="padding: 10px;background: #fff;">
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
        >
            <div style="border-bottom: 2px solid #fff;" v-for="(item,index) in shopList" :key="index" @click="jumpDetail(item.id)">
                <van-card
                        :tag="item.shop_cate_name"
                >
                    <template #title>
                        <h3>{{item.name}}</h3>
                    </template>
                    <template #thumb>
                        <img :src="item.img_thumb" v-if="item.img_thumb != '' " style="width: 100%;">
                        <img src="/static/wechat/img/shop/shop_default.png" v-else style="width: 100%;">
                    </template>
                    <template #desc>
                        {{item.state_text}}
                    </template>
                    <template #price>
                        {{item.address}}
                    </template>
                    <template #num>
                        距离：{{item.distance}}公里
                    </template>
                </van-card>
            </div>
        </van-list>


    </div>

    {include file="index/_tabbar" /}
</div>
{include file="index/_share" /}
<script>
    new Vue({
        el:"#app",
        data(){return{
            carousel:[],
            // 下拉刷新
            isLoading: false,
            // 上拉加载
            loading: false,
            finished: false,
            shopList: [],
            page: 0,
            last_page: 1,
            limit: 10,
            yes:true,
            no:false,
            keywords:'',
            district:'定位中',
            active:1,
            shopCateList:[],
            SwipeLength:1,
        }},
        created(){
            let that =this
            this.getCarousel()
            this.getShopCate()
            wx.ready(function(){
                wx.getLocation({
                    type: 'wgs84',
                    success: function (res) {
                        var latitude = res.latitude;
                        var longitude = res.longitude;
                        localStorage.setItem('latitude',latitude)
                        localStorage.setItem('longitude',longitude)
                        that.onload()
                    }
                });
            });
        },
        methods:{
            jumpSearch(){
                window.location.href = "{:url('shop/search')}"
            },
            onload(){
                this.loading = true
                this.page ++
                if (this.last_page < this.page){
                    this.finished = true
                }else{
                    this.getShopList()
                }
            },
            getCarousel(){
                let that = this
                axios.post("{:url('index/getCarousel')}",{cate_id:10}).then(function (ret) {
                    that.carousel = ret.data.data
                    console.log(that.carousel)
                })
            },
            // 获取店铺分类
            getShopCate(){
                let that = this;
                axios.post("{:url('shop/getShopCate')}").then(function (ret) {
                    that.shopCateList = ret.data.data
                    that.SwipeLength = Math.ceil(that.shopCateList.length/8)+1
                })
            },
            getShopList(){
                let that = this;
                let latitude = localStorage.getItem('latitude')
                let longitude = localStorage.getItem('longitude')

                axios.post("{:url('shop/getShop')}",{
                    limit:that.limit,
                    page:that.page,
                    latitude:latitude,
                    longitude:longitude,
                    keywords:that.keywords,
                    shop_cate_id:that.shop_cate_id,
                }).then(function (ret) {

                    if (ret.data.code == 1){
                        vant.Notify({ type: 'danger', message: ret.data.msg });
                    }

                    that.loading = false;
                    that.isLoading = false;

                    let data = ret.data.data
                    if (that.page == 1){
                        that.shopList = data.data
                    }else{
                        for (var i = 0,len=data.data.length;i<len;i++){
                            that.shopList.push(data.data[i])
                        }
                    }

                    that.last_page = data.last_page
                    that.district = ret.data.msg.address.district

                    if (that.last_page == that.page || that.last_page == 0){
                        that.finished = true
                    }
                })
            },
            jumpGoodsQiangDetail(goods_id){
                window.location.href = "{:url('goods/detail')}?goods_id="+goods_id
            },
            onTabbarChange(index){
                let url = '';
                switch (index) {
                    case 0:url = "{:url('index/index')}";break;
                    case 1:url = "{:url('shop/index')}";break;
                    case 2:url = "{:url('forum/index')}";break;
                    case 3:url = "{:url('user/index')}";break;
                }
                window.location.href = url;
            },
            shopCateChange(shop_cate_id){
                this.finished = false
                this.shop_cate_id = shop_cate_id
                this.getShopList()
            },
            jumpDetail(shop_id){
                window.location.href = "{:url('shop/detail')}?shop_id="+shop_id
            }
        },
    })
</script>
</body>
</html>
